<template>
    <view class="wrap">
        <view class="search_wrap">
            <u--input
                placeholder="请输入搜索关键字"
                prefixIcon="search"
                prefixIconStyle="font-size: 13px;color: #AFAFAF"
                placeholder-style="font-size: 28rpx;color: #AFAFAF;"
                border="none"
                style="height: 72rpx;background: #EFEFEF;border-radius: 50rpx;padding: 0 32rpx;"
            ></u--input>
        </view>
        <view class="code_box">
            <view class="code_type">
                <view class="type_text">督学一级分类 / 督学二级分类1</view>
                <view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
            </view>
            <view class="code_list">
                <view class="code_item">
                    <view class="checkbox"></view>
                    <view class="detail">
                        <view class="item_name">建设工程造价管理基础知识</view>
                        <view class="item_buy">
                            <view class="item_total">￥<text class="big_text">240</text>.00</view>
                            <view class="item_quantity">
                                <view class="add">+</view>
                                <view class="num">1</view>
                                <view class="less">-</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom">
            <view class="cost_total">
                <view class="allcheck">
                    <view class="checkbox"></view>
                    <view class="checkbox_text">全选</view>
                </view>
                <view>合计<text class="red_text">￥240.00</text></view>
            </view> 
           <view class="verify">结算并支付</view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                search:''
            }
        }
    }
</script>
<style lang="scss" scoped>
.wrap {
    position: relative;
    .checkbox {
        width: 36rpx;
        height: 36rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        border: 2rpx solid #D2D2D2;
    }
    .search_wrap {
        width: 100%;
        height: 142rpx;
        background: #fff;
        padding: 30rpx 36rpx;
        box-sizing: border-box;
    }
    .code_box {
        width: 100%;
        height: calc(100vh - 142rpx);
        padding: 40rpx 28rpx;
        box-sizing: border-box;
        background: #ECECEC;
        .code_type {
            height: 70rpx;
            background: #FFFFFF;
            border-radius: 12rpx;
            padding: 16rpx 20rpx 14rpx 20rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .type_text {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #000000;
            }
        }
        .code_list {
            margin-top: 32rpx;
            .code_item {
                display: flex;
                height: 212rpx;
                background: #FFFFFF;
                box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.05);
                border-radius: 12rpx;
                padding: 34rpx 30rpx 34rpx 28rpx;
                box-sizing: border-box;
                margin-bottom: 24rpx;
                .checkbox {
                    margin-top: 2rpx;
                }
                .detail {
                    margin-left: 24rpx;
                    flex: 1;
                }
                .item_name {
                    height: 50rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #000000;
                }
                .item_buy {
                    height: 66rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 28rpx;
                    .item_quantity {
                        display: flex;
                        align-items: center;
                        .add,.less {
                            width: 56rpx;
                            height: 56rpx;
                            background: #E3E7EC;
                            border-radius: 12rpx;
                            font-size: 48rpx;
                            color: #64707D;
                            text-align: center;
                            line-height: 48rpx;
                        }
                        .num {
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 36rpx;
                            color: #000000;
                            margin: 0 32rpx;
                        }
                    }
                    .item_total {
                        font-family: PingFang SC;
                        font-weight: 800;
                        font-size: 28rpx;
                        color: #FF0000;
                        .big_text {
                            font-size: 48rpx;
                            
                        }
                    }
                }
            }
        }
    }
    .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 102rpx;
        display: flex;
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #000000;
        line-height: 102rpx;
        .cost_total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 494rpx;
            height: 102rpx;
            background: #fff;
            padding: 0 28rpx;
            box-sizing: border-box;
            font-weight: bolder;
            .allcheck {
                display: flex;
                align-items: center;
            }
            .checkbox_text {
                margin-left: 10rpx;
            }
            .red_text {
                font-size: 36rpx;
                color: #FF0000;
            }
        }
        .verify {
            width: 258rpx;
            height: 102rpx;
            background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
            font-size: 32rpx;
            color: #FFFFFF;
            text-align: center;
        }
    }
}
</style>